<template>
  <div>
    <div>
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="标题">
          <el-input v-model="search.title" placeholder="请输入关键字" />
        </el-form-item>
        <el-form-item label="详情">
          <el-select multiple v-model="roleList.num" placeholder="请选择角色">
            <el-option
              v-for="item in roleList"
              :label="item.name"
              :value="item.num"
              :key="item.num"
              >{{ item.name }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="userList" border style="width: 100%">
      <el-table-column
        header-align="center"
        align="center"
        prop="id"
        label="id"
        width="180"
      />
      <el-table-column
        header-align="center"
        align="center"
        prop="name"
        label="名字"
        width="180"
      />
      <el-table-column
        header-align="center"
        align="center"
        prop="role"
        label="详情"
      >
        <template #default="scope">
          <span v-for="item in scope.row.role" :key="item.num">
            {{ item.name }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="edit"
        label="编辑"
      >
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog v-model="dialogFormVisible" title="修改用户信息">
    <el-form :model="editUser">
      <el-form-item label="姓名" label-width="80px">
        <el-input v-model="editUser.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="角色" label-width="80px">
        <el-select multiple v-model="editUser.role" placeholder="请选择角色">
          <el-option
            v-for="item in roleList"
            :label="item.name"
            :value="item.num"
            :key="item.num"
            >{{ item.name }}</el-option
          >
        </el-select>
      </el-form-item>
      <el-form-item label="电话" label-width="80px">
        <el-input v-model="editUser.tel" autocomplete="off" />
      </el-form-item>
      <el-form-item label="称号" label-width="80px">
        <el-input v-model="editUser.username" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="changeUserInfo">更改</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          取消
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { getUserList, getRoleList } from '../request/api'
import { userData, userInt } from '../type/user'

export default defineComponent({
  setup() {
    const data = reactive(new userData())
    onMounted(() => {
      getUser()
      roleList()
    })

    const getUser = () => {
      getUserList()
        .then((res) => {
          data.userList = res.data
        })
        .catch((err) => {
          console.log(err)
        })
    }

    const roleList = () => {
      getRoleList()
        .then((res) => {
          data.roleList = res.data
        })
        .catch((err) => {
          console.log(err)
        })
    }

    const btnScope = (scope: any) => {
      console.log(scope)
    }

    const onSubmit = () => {
      console.log('111')
    }

    const handleEdit = (index: number, row: userInt) => {
      console.log(index, 'row', row)
      // 结合user.ts 中 editUserInt --> role: number[]  查看
      //#region
      data.editUser = {
        id: row.id,
        name: row.name,
        role: row.role.map((value) => value.num),
        tel: row.tel,
        username: row.username
      }
      //#endregion

      // 此种方法 当编辑用户信息时，角色选项框不会选中当信息的角色
      // data.editUser = row
      data.dialogFormVisible = true
      console.log('editUser', data.editUser)
    }

    const changeUserInfo = () => {
      console.log(data.editUser)
      // data.dialogFormVisible = false
      console.log()
    }

    return { ...toRefs(data), btnScope, onSubmit, handleEdit, changeUserInfo }
  }
})
</script>

<style scoped></style>
